<template>
  <a-card title="定义-使用链 (DU)" v-if="duData" style=" height: 97.5vh">
    <a-table :columns="columns" :data-source="duData" row-key="name" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'du_paths'">
          <ul>
            <li v-for="(path, index) in record.du_paths" :key="index">
              定义: {{ path.define }}, 使用: {{ path.use }}
            </li>
          </ul>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script>
export default {
  props: {
    duRaw: String, // 直接接收后端返回的 `du` 数据（原始 JSON 字符串）
  },
  data() {
    return {
      duData: [],
      columns: [
        { title: "变量名", dataIndex: "name", key: "name" },
        { title: "DU 路径", dataIndex: "du_paths", key: "du_paths" }
      ]
    };
  },
  watch: {
    duRaw: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.parseDUData(newValue);
        }
      }
    }
  },
  methods: {
    parseDUData(rawData) {
      try {
        // console.log(rawData)
        // // 去除 Markdown 代码块 (` ```json ... ``` `)
        // const cleanedData = rawData.replace(/^```json\n/, "").replace(/\n```$/, "");

        // 解析 JSON
        const parsedData = JSON.parse(rawData);

        // 提取变量列表
        if (parsedData.variables) {
          this.duData = parsedData.variables;
        }
      } catch (error) {
        console.error("解析 DU 数据失败:", error);
      }
    }
  }
};
</script>

<style>
ul {
  padding-left: 20px;
}
li {
  list-style: none;
}
</style>
